<template>
    <a-list :data-source="dataSource">
      <template #loadMore>
        <div style="text-align: center; margin-top: 15px">
          <a-button @click="onLoadMore" type="primary" ghost :disbaled="loading">加载更多</a-button>
        </div>
      </template>
      <template #renderItem="{ item, index }">
        <a-list-item>
          <a-comment>
            <template #actions>
              <span>
                <a-tooltip title="点赞">
                  <template v-if="item.action === 1">
                    <LikeFilled @click="like(index)" />
                  </template>
                  <template v-else>
                    <LikeOutlined @click="like(index)" />
                  </template>
                </a-tooltip>
                <span style="padding-left: 8px; cursor: auto">
                  {{ item.like }}
                </span>
              </span>
              <span>
                <a-tooltip title="踩">
                  <template v-if="item.action === 2">
                    <DislikeFilled @click="dislike(index)" />
                  </template>
                  <template v-else>
                    <DislikeOutlined @click="dislike(index)" />
                  </template>
                </a-tooltip>
                <span style="padding-left: 8px; cursor: auto">
                  {{ item.dislike }}
                </span>
              </span>
              <span @click="spanReply(index)">回复</span>
              <a-popconfirm title="确定删除吗？" ok-text="确定"  cancel-text="取消" @confirm="onDeleteReply(item.id, index, cid)">
                <span v-if="item.canDelete">删除</span>
              </a-popconfirm>
            </template>
            <template #content>
              <div><p>{{ item.content }}</p></div>
            </template>
            <template #author><a>{{ item.sender }}</a>&nbsp;@&nbsp;<a>{{ item.receiver }}</a></template>
            <template #datetime>
              <span>{{ item.time }}</span>
            </template>
            <div v-if="item.showReply">
              <a-form-item>
                <a-textarea
                  v-model:value="reply"
                  :rows="2"
                  allowClear
                  :maxlength="500"
                  placeholder="写下精彩的回复吧"
                  style="width: 320px" />
              </a-form-item>
              <a-form-item>
                <a-button @click="submitReply(index)" type="primary">回复</a-button>
              </a-form-item>
            </div>
          </a-comment>
        </a-list-item>
        </template>
      </a-list>
      <div style="text-align: center; margin-top: 20px" v-show="loading">
        <a-spin></a-spin>
      </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import { Comment, Tooltip, List, Input, Button, Form, message, Popconfirm, Spin } from 'ant-design-vue'
import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons-vue'
import { CommentDs, ReplySend } from '@/utils/ds'
import {
  addReply,
  commentLike,
  commentDislike
} from '@/service'
import { LIKE_OP, DISLIKE_OP, NULL_OP } from '@/utils/constants'

export default defineComponent({
  name: 'SubComment',
  components: {
    AComment: Comment,
    ATooltip: Tooltip,
    DislikeFilled,
    DislikeOutlined,
    LikeOutlined,
    LikeFilled,
    AList: List,
    AListItem: List.Item,
    AButton: Button,
    ATextarea: Input.TextArea,
    AFormItem: Form.Item,
    APopconfirm: Popconfirm,
    ASpin: Spin
  },
  props: {
    dataSource: {
      type: Object as PropType<CommentDs[]>,
      default: () => {
        return [] as CommentDs[]
      },
      require: true
    },
    uname: {
      type: String,
      default: 'K'
    },
    cid: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['reply-load-more', 'reply-success', 'reply-delete'],
  setup (props, context) {
    const reply = ref<string>('')

    const like = (idx: number) => {
      const item = props.dataSource[idx]
      const previousAction = item.action
      if (previousAction === LIKE_OP) {
        item.like -= 1
        item.action = NULL_OP
        commentLike(item.id, 0)
        return
      }
      if (previousAction === DISLIKE_OP) {
        item.dislike -= 1
      }
      item.like += 1
      item.action = LIKE_OP
      commentLike(item.id, 1)
    }

    const dislike = (idx: number) => {
      const item = props.dataSource[idx]
      const previousAction = item.action
      if (previousAction === DISLIKE_OP) {
        item.dislike -= 1
        item.action = NULL_OP
        commentDislike(item.id, 0)
        return
      }
      if (previousAction === LIKE_OP) {
        item.like -= 1
      }
      item.dislike += 1
      item.action = DISLIKE_OP
      if (item.id > 0) {
        commentDislike(item.id, 1)
      }
    }

    const spanReply = (idx: number) => {
      const item = props.dataSource[idx]
      item.showReply = !item.showReply
    }

    const submitReply = (idx: number) => {
      if (reply.value === '') {
        return
      }
      const item = props.dataSource[idx]
      const cur = new Date().getTime()
      const dataSend: ReplySend = {
        cid: props.cid,
        refId: item.id,
        sender: props.uname,
        receiver: item.sender,
        rid: item.sid,
        content: reply.value,
        created: cur
      }
      addReply(dataSend)
        .then(response => {
          if (response.status !== 200) {
            return
          }
          const resp = response.data
          if (resp.code !== 0 || resp.data === null) {
            message.info('回复失败', 0.5)
            return
          }
          context.emit('reply-success', dataSend, resp.data)
          reply.value = ''
          item.showReply = false
          message.info('回复成功', 0.5)
        })
    }

    const onLoadMore = () => {
      context.emit('reply-load-more')
    }

    const onDeleteReply = (id: number, idx: number, cid: number) => {
      context.emit('reply-delete', id, idx, cid)
    }

    return {
      reply,
      dislike,
      like,
      spanReply,
      submitReply,
      onLoadMore,
      onDeleteReply
    }
  }
})
</script>

<style scoped>

</style>
